<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        :title="proname"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <van-popover
            v-model="showPopover"
            theme="dark"
            trigger="click"
            placement="bottom-end"
            :actions="actions"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="weapp-nav" size="18"/>
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </header>
    <div class="content">
      <!-- 轮播图 -->
      <van-swipe class="detailBanner">
        <van-swipe-item v-for="(item, index) of banners" :key="index" @click="previewImage(index)">
          <van-image :src="item" fit="fill"></van-image>
        </van-swipe-item>
      </van-swipe>
      <van-icon @click="show=true" name="play-circle" class="playBtn" color="#f66" size="24"/>
      <h3>{{ proname }}</h3>
      <p>{{ originprice }}</p>
      <van-goods-action v-if="issale !== 0">
        <van-goods-action-icon icon="chat-o" text="客服" dot />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="toCart" badge="5" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button type="warning" @click="addCartFn" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
      <van-goods-action v-else>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button
          type="danger"
          :disabled="true"
          text="商品已下架"
        />
      </van-goods-action>
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <van-overlay :show="show" @click="show = false">
      <video ref="vdo" @click.stop controls src="https://jvod.300hu.com/vod/product/0a7d8553-6fdf-49c4-b70c-a2bbd54510f4/7d3fefb3fa12446d94725799e00896f8.mp4"></video>
    </van-overlay>
  </div>
</template>
<script>
import Vue from 'vue'
import {
  NavBar,
  Popover, ShareSheet,
  Swipe,
  SwipeItem,
  Image as VanImage,
  ImagePreview,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Overlay,
  Toast
} from 'vant'
import { getProDetail } from './../../api/detail'
import { addCart } from './../../api/cart'
Vue.use(NavBar)
Vue.use(Popover)
Vue.use(ShareSheet)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(Overlay)
Vue.use(Toast)
export default {
  data () {
    return {
      showPopover: false,
      actions: [
        { index: 1, text: '首页', icon: 'wap-home-o' },
        { index: 2, text: '分类', icon: 'bars' },
        { index: 3, text: '购物车', icon: 'shopping-cart-o' },
        { index: 4, text: '我的', icon: 'friends-o' },
        { index: 5, text: '分享', icon: 'share-o' }
      ],
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      proid: '',
      proname: '',
      originprice: '',
      banners: [],
      issale: 0,
      show: false
    }
  },
  watch: {
    show (newVal) {
      if (!newVal) {
        this.$refs.vdo.pause() // 暂停
        this.$refs.vdo.currentTime = 0 // 下次播放从头开始
      } else {
        this.$refs.vdo.play() // 播放
      }
    }
  },
  mounted () {
    getProDetail(this.$route.params.proid).then(res => {
      const banners = res.data.data.banners[0].split(',')
      this.banners = banners
      this.proid = this.$route.params.proid
      this.proname = res.data.data.proname
      this.originprice = res.data.data.originprice
      this.issale = res.data.data.issale
    })
  },
  methods: {
    onSelect (action) {
      console.log(action)
      switch (action.index) {
        case 1:
          this.$router.push('/home')
          break
        case 2:
          this.$router.push('/kind')
          break
        case 3:
          this.$router.push('/cart')
          break
        case 4:
          this.$router.push('/user')
          break
        case 5:
          this.showShare = true
      }
    },
    previewImage (index) {
      ImagePreview({
        images: this.banners,
        startPosition: index
      })
    },
    addCartFn () {
      if (localStorage.getItem('isLogin') === 'true') {
        addCart({
          userid: localStorage.getItem('userid'),
          proid: this.proid,
          num: 1
        }).then(() => {
          Toast('加入购物车成功')
        })
      } else {
        this.$router.push('/login')
      }
    },
    toCart () {
      this.$router.push('/cart')
    }
  }
}
</script>

<style lang="stylus" scoped>
.detailBanner
  height 2.8rem
  overflow hidden
.playBtn
  position absolute
  top 2.7rem
  left 50%
  transform translateX(-50%)
</style>
